<template>
    <div class="direct-plan-detail-view view-container">

        <header-module left-custom padding>
            <template #left-con>
                <div>
                    <span style="font-size: 16px; margin-right: 20px">商业营销规划：{{ datas.planName }}</span>

                    <el-tag size="small" type="warning">{{ getState(datas.planStatus) }}</el-tag>
                </div>
            </template>

            <template #btn>
                <el-button class="main-btn" size="small" @click="onBack">返回</el-button>

                <template v-if="datas.id">
                    <el-button
                            v-auth="{v:['crm:businessPlan:pms'],bool:datas.planStatus == 1 || datas.planStatus == -1 || datas.flowStatus=='REJECT_INITIATOR'}"
                            class="delete-btn" size="small" @click="onDelete">删除
                    </el-button>
                    <el-button
                            v-auth="{v:['crm:businessPlan:pms'],bool:datas.planStatus == 1 || datas.planStatus == -1 || datas.flowStatus=='REJECT_INITIATOR'}"
                            class="main-btn" size="small" type="primary" @click="onEdit">编辑
                    </el-button>

                    <el-button
                            v-auth="{v:['crm:businessPlan:pms'],bool:datas.planStatus == 1 || datas.planStatus == -1 || datas.flowStatus=='REJECT_INITIATOR'}"
                            class="main-btn" size="small" type="primary" @click="onAudit">提交审核
                    </el-button>
                    <el-button v-auth="{v:['crm:businessPlan:end'],bool:datas.planStatus == 3}" class="main-btn" size="small"
                               type="primary" @click="endPlan">结束招商
                    </el-button>
                </template>

            </template>

        </header-module>

        <div class="main-content">

            <item-title title="基本信息"/>

            <el-form
                    :inline="true"
                    label-position="right"
                    label-width="120px"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="招商规划编号：">
                            {{ datas.planNo }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="招商规划名称：">
                            {{ datas.planName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="招商结束日期：">
                            {{ dateFormat("yyyy-mm-dd", datas.expireTime) }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="通用名：">
                            {{ datas.productPopularName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品名：">
                            {{ datas.productName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="包装规格：">
                            {{ datas.packSpecs }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="生产厂家：">
                            {{ datas.producer }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="交易价：">
                            {{ datas.tradePrice }}元/{{ getLabel('sell_unit', datas.sellUnit) }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="来源：">
                            {{ datas.planSource }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="关联市场准入：">
                            <el-link v-if="datas.chanceId" :underline="false" style="display: flex;align-items: center" type="primary"
                                     @click="onClick">
                                {{ datas.chanceName }}
                            </el-link>
                            <span v-else>暂无</span>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>

            <item-title title="修改记录"/>

            <operation-view/>

        </div>

        <!-- 计划详情 -->
        <detail-drawer
                ref="detailDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>
                <span>关联市场准入 - {{ datas.chanceName }}</span>
            </template>
            <template #contents>

                <chance-info :id="datas.chanceId"/>

            </template>
        </detail-drawer>

    </div>
</template>

<script>
    import {useRoute, useRouter} from 'vue-router'
    import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'

    export default defineComponent({
        name: 'Index',
        components: {
            chanceInfo: defineAsyncComponent(() =>
                import('../../../commonView/detailComponents/business/chanceInfo.vue')
            ),
        },
        setup() {
            const currentInstance = getCurrentInstance()
            const route = useRoute()
            const router = useRouter()
            const api = inject('api')
            var data = reactive({
                datas: {},
                list: [],
                detailDrawer: null,
            })

            const onBack = () => {
                router.back()
            }

            const onEdit = () => {
                router.push({name: 'addBusinessPlan', query: {id: data.datas.id}})
            }

            const onAudit = () => {
                if (!data.list.length) {
                    currentInstance.proxy.customMessage({type: 'error', message: '请添加地区信息'})
                    return
                }
                currentInstance.proxy
                    .alertBox({
                        message: '是否提交审核该规划？',
                        title: '审核',
                    })
                    .then(() => {
                        api.plan.PLAN_CHECK_COMMIT({id: data.datas.id}).then((res) => {
                            if (res.code) {
                                currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                            } else {
                                currentInstance.proxy.customMessage({type: 'success', message: '提交成功'})
                                getData()
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const onDelete = () => {
                currentInstance.proxy
                    .alertBox({
                        message: '是否确认删除该规划？',
                        title: '删除',
                    })
                    .then(() => {
                        api.plan.PLAN_DELETE_BYID({id: data.datas.id}).then((res) => {
                            if (res.code) {
                                currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                            } else {
                                currentInstance.proxy.customMessage({type: 'success', message: '删除成功'})
                                router.back()
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const endPlan = () => {
                currentInstance.proxy
                    .alertBox({
                        message: '结束招商规划后，待开发、开发失败的任务将停止招商，确定结束？',
                        title: '结束',
                    })
                    .then(() => {
                        api.plan.PLAN_DETAIL_END({id: data.datas.id}).then((res) => {
                            if (res.code) {
                                currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                            } else {
                                currentInstance.proxy.customMessage({type: 'success', message: '操作成功'})
                                getData()
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const onClick = () => {
                data.detailDrawer.open()
            }

            const getData = () => {
                api.plan.GET_PLAN_DETAIL({id: route.query.id}).then(res => {
                    if (!res.code) {
                        data.datas = res.data.plan.planInfo
                        data.list = res.data.plan.planDetail

                        data.list.forEach(a => {
                            a.name = a.streetName ? a.areaName + '/' + a.streetName : a.areaName
                        })
                    } else {
                        currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                    }
                })
            }

            const getState = (state) => {
                if (!state) {
                    return ''
                }
                switch (state) {
                    case '-1':
                        return '审核未通过'
                    case '1':
                        return '草稿'
                    case '2':
                        return '审核中'
                    case '3':
                        return '进行中'
                    case '4':
                        return '已结束'
                }
            }

            onMounted(() => {
                getData()
            })

            return {
                ...toRefs(data),

                onBack,
                onEdit,
                onClick,
                onDelete,
                endPlan,
                onAudit,
                getState,
            }
        }
    })
</script>

<style scoped>

</style>
